import "../../../../scss/activity/lottery/turntable.scss"
import $ from "jquery"

$(function () {

  let page = {


    _appData: {
      Awards: [
        {
          'text': '耳机',
          'name': 'icono-headphone',
          'probability': 5,
          "img": "/img/activity/lottery/turntable/element-prize-forth@2x.png",
          "number": "5"
        },
        {
          'text': 'iPhone',
          'name': 'icono-iphone',
          'probability': 15,
          "img": "/img/activity/lottery/turntable/element-prize-first@2x.png",
          "number": "5"
        },
        {
          'text': '相机',
          'name': 'icono-camera',
          'probability': 25,
          "img": "/img/activity/lottery/turntable/element-prize-forth@2x.png",
          "number": "5"
        },
        {
          'text': '咖啡杯',
          'name': 'icono-cup',
          'probability': 25,
          "img": "/img/activity/lottery/turntable/element-prize-forth@2x.png",
          "number": "5"
        },
        {
          'text': '日历',
          'name': 'icono-calendar',
          'probability': 20,
          "img": "/img/activity/lottery/turntable/element-prize-forth@2x.png",
          "number": "5"
        },
        {
          'text': '键盘',
          'name': 'icono-keyword',
          'probability': 10,
          "img": "/img/activity/lottery/turntable/element-prize-forth@2x.png",
          "number": "5"
        }

      ],
    },
    _init: function () {
      let self = this;
      self._loadTemp()
    },

    _loadTemp: function () {
      let self = this;
      self._afterTemp()
    },
    _afterTemp: function () {

      let self = this;


      let awards = self._appData.Awards;

      let len = awards.length;
      let turnNum = 1 / len;  // 文字旋转 turn 值
      let gbWheel = $('#gbWheel');
      let lineList = gbWheel.find('ul.gb-wheel-line');
      let itemList = gbWheel.find('.gb-wheel-list');
      let lineListHtml = [];
      let itemListHtml = [];
      // 考虑兼容性问题
      let transform = preTransform();


       // 由奖品信息遍历显示大转盘
      awards.forEach(function (value, index) {

        // 分隔线
        lineListHtml.push('<li class="gb-wheel-litem" style="' + transform + ': rotate(' + (index * turnNum + turnNum / 2) + 'turn)"></li>');
        // 奖项
        itemListHtml.push('<div class="gb-wheel-item">');
        itemListHtml.push('<div class="gb-wheel-icontent" style="' + transform + ': rotate(' + (index * turnNum) + 'turn)">');

        itemListHtml.push('<p class="gb-wheel-itext">');
        itemListHtml.push(value.text);
        itemListHtml.push('<p class="gb-wheel-iicon">');
        itemListHtml.push('<img class="' + value.name + '" src="' + value.img + '" style="width: 20px;margin-top: 10px;">');
        itemListHtml.push('</p>');
        itemListHtml.push('</p>');
        itemListHtml.push('</div>');
        itemListHtml.push('</div>');
      });
      lineList.html(lineListHtml.join(''));
      itemList.html(itemListHtml.join(''));


      // transform兼容
      function preTransform() {
        let cssPrefix,
          vendors = {
            '': '',
            Webkit: 'webkit',
            Moz: '',
            O: 'o',
            ms: 'ms'
          },
          testEle = document.createElement('p'),
          cssSupport = {};

        // 嗅探特性
        Object.keys(vendors).some(function (vendor) {
          if (testEle.style[vendor + (vendor ? 'T' : 't') + 'ransform'] !== undefined) {
            cssPrefix = vendor ? '-' + vendor.toLowerCase() + '-' : '';
            return true;
          }
        });
        function normalizeCss(name) {
          name = name.toLowerCase();
          return cssPrefix ? cssPrefix + name : name;
        }

        cssSupport = {
          transform: normalizeCss('Transform')
        };
        return cssSupport.transform;
      }
    }
  }


  page._init()

})

